<template>
  <div class="order">
    <Back />
    <ul class="Orderu1">
      <li
        @click="change(i, item.til)"
        :class="active == i ? 'bg1' : ''"
        v-for="(item, i) in total"
        :key="i"
      >
        {{ item.til }}
      </li>
    </ul>
    <ul class="orderBox1" v-for="item in all3" :key="item.id">
      
      <!-- {{item}} -->
      <li >
        <p>订单号: {{ item.order.orderName }}</p>
        <!-- **状态(日等待付款,1己付款,2取消付款)* -->
        <b
          v-show="item.order.orderState === 0"
          :class="item.order.orderState == 0 ? 'bg1' : 'bg2'"
          >{{ item.order.orderState == 0 ? "等待付款" : "已付款" }}</b
        >
        <div class="section">
          <i @click="del(item.order.orderId)" class="el-icon-circle-close"></i>
          <img class="imgurl" :src="url + item.course.imgUrl" alt="" />
          <p class="innerp1">{{ item.course.courseName }}</p>
          <p class="innerp2">
            <span>{{ item.course.courseLevel }}</span
            ><span>{{ item.course.courseType }}</span>
          </p>
          <div class="innerp3">
            <img class="imgurl2" :src="url + item.course.imgUrl" alt="" />
            <!-- 讲师名称 -->
            <p>{{ item.teacher.teacherName }}111</p>
          </div>
        </div>
        <!-- <List @abc="check" :data="item" /> -->
        <p>
          应付金额: <span>￥{{ item.course.sellPrice }}</span>
        </p>
        <i
          v-if="item.order.orderState != 0"
          v-show="item.order.orderState == 1"
          class="i1"
          @click="comments(item)"
          >查看评价</i
        >

        <i
          v-if="item.order.orderState != 0"
          v-show="item.order.orderState == 2"
          class="i3"
          @click="
            View(
              item.order.orderId,
              item.course.sellPrice,
              item.course.courseId
            )
          "
          >立即购买</i
        >
        <i
          v-show="item.order.orderState == 2"
          class="i2"
          @click="order(item.order.orderId)"
          >取消订单</i
        >
      </li>
    </ul>
    <el-empty v-show="showempty" description="订单列表为空"></el-empty>
    <Top />
  </div>
</template>

<script>
import { myorder, update, DfaddPay, userInfo, detailBuy } from "@/api";
import List from "./List.vue";
export default {
  components: {
    List,
  },
  methods: {
    // 查看评价
    comments(item) {
      // console.log(item.course.courseId);
      this.$router.push({
        path: "lesdetail?courseId=" + item.course.courseId,
      });
    },
    // 取消订单
    order(i) {
      this.del(i)
    },
    // 立即购买
    View(i, item, courseId) {
      console.log(item, "item");
      let m1 = this.$store.state.money;
      // console.log(m1, "money");
      let id = this.$store.state.id;
      if (m1 >= item) {
        DfaddPay({ money: item, uid: id }).then((res) => {
          // 删除数据
          let user = courseId;
          this.detailBuy(i, user);
          this.$store.dispatch("changeMoney", res.data.data.userMoney);
        });
        this.$toast({ 
            message: '购买成功',
            icon: 'success',
            duration:1000
        });
      } else {
        this.$toast({ 
          message: '余额不足',
          icon: 'cross',
          duration:1000
        });
      }
      // item.order.orderId
    },
    userInfo() {
      let id = this.$store.state.userphone;
      userInfo({ userphone: id }).then((res) => {
        this.$store.state.money = res.data.data.userMoney;
      });
    },
    getmoney() {
    },
    check(i) {
      // this.all = this.all.filter((item) => item.id !== i);
    },
    
    detailBuy(i, user) {
      let id = this.$store.state.id;
      // 购买接口 课程id 跟用户id
      detailBuy({ courseId: user, userId: id }).then((res) => {
      });
      // 更改状态接口 课程id  修改购买状态为1
      update({ orderId: i, orderState: 1 }).then((res) => {
      });
      // 定时器 1s 后刷新数据
      setTimeout(() => {
        this.checkout();
      }, 1000);
    },
    del(i) {
      update({ orderId: i, orderState: 3 }).then((res) => {
        this.$toast({ 
            message: '操作成功',
            icon: 'success',
        });
      });
      setTimeout(() => {
        this.checkout();
      }, 200);
    },
    // 查询接口 刷新数据 通过orderState=this.active和id=userId
    checkout() {
      let tes1 = this.$store.state.id
      let test2 = this.active
      myorder({ userId: tes1, orderState: test2}).then((res) => {
        this.all3 = res.data.data;
      });
    },
    change(i, id) {
      this.active = i;
      this.name = id;
      let user = this.$store.state.id;
      myorder({ userId: user, orderState: i }).then((res) => {
        if (res.data.data.length==0) {
          this.all3 = [];
          this.showempty = true
        } else {
          this.all3 = res.data.data;
          this.showempty = false
        }
      });
    },
  },

  created() {
    // this.test();
    // this.userInfo()
    // console.log(this.name, "创建");
    // let id = this.$store.state.userphone;
    let user = this.$store.state.id;
    myorder({ userId: user, orderState: this.active }).then((res) => {
      this.all3 = res.data.data;
      
    });
    setTimeout(()=>{
      this.loading= false
    },1000)
  },
  data() {
    return {
      url: "http://192.168.10.32/yonghao/",
      // 用数据控制空白区域和有订单区域
      show: true,
      // url:'http://192.168.10.30/junjian/img/%E7%94%B5%E5%95%86/3.png',
      name: "全部",
      active: 0,
      all1: [],
      all2: [],
      all3: [],
      showimg: false,
      showempty:'',
      total: [
        {
          id: 1,
          state: 0,
          til: "全部",
        },
        {
          id: 3,
          state: 2,
          til: "已完成",
        },
        {
          id: 2,
          state: 1,
          til: "代付款",
        },
      ],
    };
  },
};
</script>

<style scoped>
.order>>>.el-icon-arrow-down{
  margin-left: -0.3vw;
}
.order >>> .el-empty {
  margin-top: 10vh;
}
.order >>> .el-empty__image {
  width: 30vw;
}
.order >>> .el-empty__description > p {
  font-size: 3vw;
}
</style>
<style scoped lang="scss">
.order {
  width: 100vw;
  font-size: 40px;
  padding-bottom: 3vh;
  .bg1 {
    color: orange;
  }
  font-size: 3vw;
  > .orderBox1 {
    margin-top: 1vh;
    padding: 0 3vw;
    margin-bottom: 1vh;
    > li {
      //   border: 0.2vw solid #ccc;
      > .section {
        position: relative;
        height: 20vh;
        block-size: border-box;
        > .el-icon-circle-close {
          font-size: 50px;
          position: absolute;
          right: 0;
          top: -2vh;
        }
        > .imgurl {
          float: left;
          width: 55vw;
          height: 18vh;
          margin-right: 5vw;
        }

        > .innerp1 {
          height: 6vh;
          line-height: 6vh;
          font-size: 32px;
        }
        > .innerp2 {
          margin-bottom: 3vh;
          > span {
            font-size: 28px;
            margin-right: 1vw;
            color: #999;
          }
        }
        > .innerp3 {
          > .imgurl2 {
            width: 7vw;
            border-radius: 50%;
            height: 7vw;
            margin-top: 1vh;
            margin-right: 3vw;
            vertical-align: middle;
          }
          > p {
            display: inline-block;
            vertical-align: middle;
            span {
              color: #000;
            }
          }
        }
      }
      > .i1 {
        margin-top: 0.8vh;
        float: right;
        color: rgb(58, 0, 19);
        font-style: normal;
        padding: 0.2vh 1vw;
        text-align: center;
        margin-right: 2vw;
        border: 0.1vw solid rgb(68, 33, 45);
      }
      > .i3 {
        margin-left: 3vw;
        margin-top: 0.8vh;
        font-style: normal;
        text-align: center;
        float: right;
        color: red;
        padding: 0.2vh 1vw;
        border: 0.1vw solid red;
      }
      > .i2 {
        margin-top: 0.8vh;
        font-style: normal;
        text-align: center;
        float: right;
        color: rgb(0, 0, 0);
        padding: 0.2vh 1vw;
        border: 0.1vw solid rgb(0, 0, 0);
      }
      > p {
        height: 4vh;
        line-height: 4vh;
        display: inline-block;
      }
      > b {
        float: right;
        margin-top: 1vh;
      }
    }
  }
  > .Orderu1 {
    box-sizing: border-box;
    /* border: 0.1vw solid #ccc; */
    height: 5.6vh;
    line-height: 5.6vh;
    display: flex;

    text-align: center;
    color: #999;
    justify-content: space-between;
    > li {
      width: 35vw;
      box-sizing: border-box;
    }
    > .bg1 {
      border-bottom: 0.3vw solid blue;
      color: black;
    }
  }
}
</style>   
<style>
  .van-toast{
    width: 14vh;
    height: 14vh;
}
.van-toast__icon{
    font-size: 15vw;
}
.van-toast__text{
    font-size: 3vw;
}
</style>